<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title>作品排行榜 - 数智化赋能“微情境·微宣讲”红色实践活动</title>

  <!-- 引入Swiper CSS -->
  <link rel="stylesheet" href="../templates/h5/assets/swiper-bundle.min.css">
  <!-- 引入Tailwind CSS -->
  <script src="../templates/h5/assets/tailwindcss3.4.17.css"></script>
  <!-- 引入Font Awesome -->
  <link href="../templates/h5/assets/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- 引入jQuery -->
  <script src="../templates/h5/assets/jquery.min.js"></script>
  <script>
    // 配置Tailwind自定义颜色（红色主题）
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#b71211', // 主红色
            secondary: '#FFD700', // 辅助金色
            red: {
              700: '#B91C1C',    // 稍浅红色
              800: '#991B1B',    // 深一点的红色
              900: '#7F1D1D',    // 最深红色
            }
          },
        },
      }
    }
  </script>

  <style type="text/tailwindcss">
    @layer utilities {
      /* 导航栏样式 */
      .nav-item {
        @apply flex flex-col items-center justify-center text-gray-300 active:bg-red-800 h-full;
      }
      .nav-item.active {
        @apply text-white;
      }
      .nav-icon {
        @apply text-lg mb-1;
      }
      .nav-text {
        @apply text-xs;
      }

      /* 排序选项样式 */
      .sort-options {
        @apply flex w-full max-h-12 overflow-x-auto overflow-y-hidden py-2 gap-2 mb-4 hide-scrollbar scroll-smooth;
      }
      .sort-option {
        @apply whitespace-nowrap px-3 py-1.5 bg-red-800 rounded-full text-sm cursor-pointer transition-all;
      }
      .sort-option.active {
        @apply bg-secondary text-red-900 font-medium;
      }

      /* 排行榜项样式 */
      .rank-item {
        @apply bg-red-800 rounded-lg overflow-hidden border border-red-700 mb-3 flex;
      }
      .rank-badge {
        @apply w-10 flex-shrink-0 flex items-center justify-center font-bold text-sm;
      }
      .top-1 {
        @apply bg-secondary text-red-900;
      }
      .top-2 {
        @apply bg-gray-300 text-red-900;
      }
      .top-3 {
        @apply bg-amber-700 text-white;
      }
      .normal-rank {
        @apply bg-red-900 text-white;
      }

      /* 隐藏滚动条但保留功能 */
      .hide-scrollbar::-webkit-scrollbar {
        @apply hidden;
      }
      .hide-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }

      /* 加载状态样式 */
      .loading {
        @apply text-center py-8 text-gray-300;
      }
    }
  </style>
</head>
<body class="bg-primary text-white">
<div class="max-w-md mx-auto min-h-screen flex flex-col">
  <!-- 页面标题栏 -->
  <div class="py-4 px-4 border-b border-red-700 bg-red-900 flex justify-between items-center">
    <a href="#" class="text-white"><i class="fa fa-arrow-left"></i></a>
    <h1 class="text-xl font-bold">作品排行榜</h1>
    <span class="w-6"></span> <!-- 占位，保持标题居中 -->
  </div>

  <!-- 页面内容区 -->
  <div class="flex-1 overflow-y-auto p-4 pb-24">
    <!-- 排序选项 -->
    <div class="sort-options">
      <div class="sort-option active" data-sort="totalScore">综合得分</div>
      <div class="sort-option" data-sort="likeCount">点赞量</div>
      <div class="sort-option" data-sort="lookCount">浏览量</div>
      <div class="sort-option" data-sort="shareCount">转发量</div>
      <div class="sort-option" data-sort="studentScore">学生评分</div>
      <div class="sort-option" data-sort="teacherScore">教师评分</div>
    </div>

    <!-- 排行榜列表（初始显示加载状态） -->
    <div class="rank-list" id="rankList">
      <div class="loading">
        <i class="fa fa-spinner fa-spin mr-2"></i> 加载中...
      </div>
    </div>
  </div>

  <!-- 底部固定导航栏 -->
  <div class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-red-900 border-t border-red-700 z-50 h-16 flex">
    <a href="/h5/index" class="nav-item active flex-1">
      <i class="nav-icon fa fa-home"></i>
      <span class="nav-text">首页</span>
    </a>
    <a href="/h5/index_huodong" class="nav-item flex-1">
      <i class="nav-icon fa fa-calendar"></i>
      <span class="nav-text">活动</span>
    </a>
    <a href="/h5/index_paihangbang" class="nav-item flex-1">
      <i class="nav-icon fa fa-bar-chart"></i>
      <span class="nav-text">排行榜</span>
    </a>
    <a href="/h5/index_yonghu" class="nav-item flex-1">
      <i class="nav-icon fa fa-user"></i>
      <span class="nav-text">我的</span>
    </a>
  </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: jquery-smartwizard-js" />

<script src="../templates/h5/assets/vconsole.min.js"></script>
<script>
  // var vConsole = new VConsole();
  // console.log('Hello world');
</script>


<script>
  $(document).ready(function() {
    // 导航栏切换效果
    $('.nav-item').click(function(e) {
      $('.nav-item').removeClass('active');
      $(this).addClass('active');
    });

    // 返回按钮事件
    $('.fa-arrow-left').parent().click(function(e) {
      e.preventDefault();
      window.history.back();
    });

    // 核心变量
    const $rankList = $('#rankList');
    const $sortOptions = $('.sort-option');
    const baseUrl = '/h5/comp/work/rank/data'; // 接口基础地址

    // 初始化：加载默认排序（综合得分）
    loadRankData('totalScore');

    // 排序切换事件
    $sortOptions.click(function() {
      // 更新选中状态
      $sortOptions.removeClass('active');
      $(this).addClass('active');

      // 加载对应排序的数据
      const sortType = $(this).data('sort');
      loadRankData(sortType);
    });

    /**
     * 加载排行榜数据
     * @param {string} rankType 排序类型（对应接口的rankType参数）
     */
    function loadRankData(rankType) {
      // 显示加载状态
      $rankList.html('<div class="loading"><i class="fa fa-spinner fa-spin mr-2"></i> 加载中...</div>');

      // 使用jQuery AJAX请求
      $.ajax({
        url: baseUrl,
        type: 'GET',
        data: { rankType: rankType },
        dataType: 'json',
        success: function(workList) {
          if (workList && workList.length > 0) {
            renderRankList(workList); // 渲染列表
          } else {
            $rankList.html('<div class="loading">暂无作品数据</div>');
          }
        },
        error: function(xhr, status, error) {
          console.error('排行榜数据请求失败：', error);
          $rankList.html('<div class="loading"><i class="fa fa-exclamation-circle mr-2"></i> 加载失败，请重试</div>');
        }
      });
    }

    /**
     * 渲染排行榜列表
     * @param {Array} workList 作品列表数据（接口返回的CompWork数组）
     */
    function renderRankList(workList) {
      let html = '';

      $.each(workList, function(index, compWork) {
        // 处理数量格式化（如 8542 → 8.5k）
        const formatCount = function(count) {
          return count >= 1000 ? (count / 1000).toFixed(1) + 'k' : count;
        };

        // 确定排名样式
        let rankBadgeClass = 'normal-rank';
        if (compWork.index === 1) rankBadgeClass = 'top-1';
        else if (compWork.index === 2) rankBadgeClass = 'top-2';
        else if (compWork.index === 3) rankBadgeClass = 'top-3';

        // 作品封面图（优先使用接口返回的coverUrl，无则用默认图）
        const coverUrl = compWork.coverUrl || 'https://picsum.photos/300/200?random=' + compWork.id;

        // 拼接单个作品HTML
        html += `
            <div class="rank-item"
                 data-totalScore="${compWork.totalScore}"
                 data-likeCount="${compWork.likeCount}"
                 data-lookCount="${compWork.lookCount}"
                 data-shareCount="${compWork.shareCount}"
                 data-studentScore="${compWork.studentScore}"
                 data-teacherScore="${compWork.teacherScore}">
              <div class="rank-badge ${rankBadgeClass}">${compWork.index}</div>
              <div class="flex-1 flex">
                <a href="/h5/index_zuopin?id=${compWork.id}">
                  <img src="${compWork.workCover}" alt="${compWork.workName}" class="w-20 h-full object-cover">
                </a>
                <div class="p-2 flex-1 overflow-hidden">
                  <h3 class="text-sm font-medium truncate">${compWork.workName || '未命名作品'}</h3>
                  <div class="flex justify-between text-xs text-gray-200 mt-1">
                    <span><i class="fa fa-star text-secondary mr-1"></i>综合: ${compWork.totalScore || 0}</span>
                    <span><i class="fa fa-thumbs-up text-secondary mr-1"></i>${formatCount(compWork.likeCount || 0)}</span>
                  </div>
                  <div class="flex justify-between text-xs text-gray-200 mt-1">
                    <span><i class="fa fa-eye text-secondary mr-1"></i>${formatCount(compWork.lookCount || 0)}</span>
                    <span><i class="fa fa-share-alt text-secondary mr-1"></i>${formatCount(compWork.shareCount || 0)}</span>
                  </div>
                  <div class="flex justify-between text-xs text-gray-200 mt-1">
                    <span><i class="fa fa-users text-secondary mr-1"></i>学:${compWork.studentScore || 0}</span>
                    <span><i class="fa fa-graduation-cap text-secondary mr-1"></i>教:${compWork.teacherScore || 0}</span>
                  </div>
                </div>
              </div>
            </div>
          `;
      });

      // 渲染到页面
      $rankList.html(html);
    }
  });
</script>
</body>
</html>